import React from 'react';
import styles from '@/assets/css/coupon-info.module.css';

const CouponInfo = () => {
    return (
        <>
            <React.UI.Image src={require('@/assets/images/coupon.png')} height={213} fit='cover' />

            <React.UI.Swiper
                autoplay={true}
                autoplayInterval={3000}
                loop={true}
                indicator={() => false}
                direction='vertical'
                style={{ '--height': '40px', 'border': '0px' }}
            >
                <React.UI.Swiper.Item >
                    <React.UI.NoticeBar
                        style={{ 'border': '0px' }}
                        content='这条通知可以关闭'
                        color='info'
                    />
                </React.UI.Swiper.Item>
                <React.UI.Swiper.Item >
                    <React.UI.NoticeBar
                        style={{ 'border': '0px' }}
                        content='适用于当前页面内信息的通知'
                        color='info'
                    />
                </React.UI.Swiper.Item>
            </React.UI.Swiper>

            <div className={styles.coupon_detail}>
                <div className={styles.coupon_info}>
                    <div className={styles.left}>
                        <div className={styles.left_top}>
                            <div>
                                <span>1.1</span>折
                            </div>
                            <div className={styles.top_info}>
                                <div>优惠券</div>
                                <div>COUPON</div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.receive}>
                        <React.UI.Button size="small" disabled color='primary'>已领取</React.UI.Button>
                    </div>
                </div>
                <div className={styles.coupon_prompt}>
                    <div className={styles.prompt_title}>温馨提示：</div>
                    <div><span>•</span>领取后2021-06-17至2021-07-31有效</div>
                    <div><span>•</span>仅限量100张, 赶快领取! </div>
                </div>
            </div>
        </>
    )
}

export default CouponInfo;